<!-- 搜索集团部门 -->
<template>
	<view class="">
		<view class="" @click="onClick">
			<u--input
			  :placeholder="placeholder"
				:placeholderClass="placeholderClass"
				:placeholderStyle="placeholderStyle"
				:inputAlign="inputAlign"
				:fontSize="fontSize"
				:color="color"
				:prefixIcon="prefixIcon"
				:prefixIconStyle="prefixIconStyle"
				:suffixIcon="suffixIcon"
				:suffixIconStyle="suffixIconStyle"
			  :border="border"
				:shape="shape"
				:customStyle="customStyle"
			  v-model="title"
				disabled
				:disabledColor="disabledColor"
			></u--input>
		</view>
		<qian-tree 
			ref="qiantree" 
			lazy 
			:selectParent="selectParent" 
			:multiple="multiple" 
			:range="list" 
			:foldAll="flod" 
			idKey="value" 
			rangeKey="departName" 
			@confirm="treeConfirm"
			@cancel="treeCancel"
		></qian-tree>
	</view>
</template>

<script>
	import qianTree from '@/components/qian-tree/qian-tree.vue';
	import { sysDepartQueryTreeList } from '@/api/index.js'
	export default {
		name: 'HSelectDepartInput',
		components: {
			qianTree
		},
		data() {
			return {
				title:'', // 选中的标题名称
				list: [],
			}
		},
		model: {
			prop: 'value',
			event: 'change',
		},
		props: {
			// 编号（不知道啥玩意后台没有备注）
			commercialType: {
				type: [String,Number],
				default: ''
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 控制单选和多选 // true是多选 false 单选
			multiple: {
				type: Boolean,
				default: false
			},
			// 弹窗中是否可选  // true可以选 false 不可以选
			selectParent: {
				type: Boolean,
				default: true
			},
			// 弹窗中列表是否折叠  // true折叠 false 不折叠
			flod: {
				type: Boolean,
				default: true
			},
			// 选中的值
			value: {
				type: [String, Number],
				default: '',
			},
			departName: {
				type: [String, Number],
				default: '',
			},
			// 输入框为空时的占位符
			placeholder: {
				type: [String, Number],
				default: '请选择',
			},
			// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
			placeholderClass: {
				type: [String],
				default: '',
			},
			// 指定placeholder的样式，字符串/对象形式，如"color: red;"
			placeholderStyle: {
				type: [String, Object],
				default: 'color: #C0C4CC'
			},
			// 输入框内容对齐方式 - left | center | right
			inputAlign: {
				type: [String,],
				default: 'left',
			},
			// 输入框字体的大小
			fontSize: {
				type: [String, Number],
				default: '15px',
			},
			// 输入框字体颜色
			color: {
				type: [String],
				default: '#303133',
			},
			// 输入框前置图标
			prefixIcon: {
				type: [String],
				default: '',
			},
			// 前置图标样式，对象或字符串
			prefixIconStyle: {
				type: [String, Object],
				default: '',
			},
			// 输入框前置图标
			suffixIcon: {
				type: [String],
				default: '',
			},
			// 前置图标样式，对象或字符串
			suffixIconStyle: {
				type: [String, Object],
				default: '',
			},
			// 边框类型，surround-四周边框，bottom-底部边框，none-无边框
			border: {
				type: [String],
				default: 'surround',
			},
			// 输入框形状，circle-圆形，square-方形
			shape: {
				type: [String],
				default: 'square',
			},
			customStyle: {
				type: [Object],
				default: () => {},
			}
		},
		watch: {
			// 监听value是否有值
			value: {
				
				handler (val, oldVal) {
					this.getPurchaseDetail()
					// if (val) {
					// 	this.getPurchaseDetail()
					// }
					if (oldVal) {
						this.$emit('change',val);
					}
				},
				immediate: true
			},
			departName: {
				handler (val, oldVal) {
					// if (val) {
						this.title = val
					// }
				},
				immediate: true
			}
		},
		computed: {
			// 当是disabled为true改变禁用的颜色
			disabledColor () {
				if (this.disabled) {
					return '#f5f7fa'
				} else {
					return '#FFFFFF'
				}
			}
		},
		methods: {
			// 获取列表
			getPurchaseDetail () {
				sysDepartQueryTreeList({id: this.value}).then(res => {
					if (res.success) {
						this.list = res.result
						const data = this.flatTree(this.list)
						const row = data.find(i => i.id === this.value) || {}
						this.$emit('update:title', row.gradationThirdShow || '')
					}
				})
			},
			/**
			 * 通过 id 获取当前树分支
			 * @param {number} id 当前数据的id
			 */
			getTitleBranch(id) {
				const data = this.flatTree(this.list)
				const row = data.find(i => i.id === id)
				const topBranch = this.treeTopBranch(data, row.parentId)
				// const bottomBranch = this.getBottomBranch(data, row.id)
				const branch = [...topBranch.reverse(), row]
				return branch
			},
			// 获取树顶级节点
			treeTopBranch (data, parentId) {
				let result = []
				function getTopBranch (data, parentId) {
					const f = data.find(i => i.id === parentId)
					if (f) {
						result.push(f)
						getTopBranch(data, f.parentId)
					}
				}
				getTopBranch(data, parentId)
				return result
			},
			// 获取树下级节点
			getBottomBranch(data, id) {
				let result = []
				function getBottomBranch (data, id) {
					const f = data.find(i => i.parentId === id)
					if (f) {
						result.push(f)
						getBottomBranch(data, f.id)
					}
				}
				getBottomBranch(data, id)
				return result
			},
			// 树结构扁平化
			flatTree(tree) {
				let arr = [];
				tree.forEach(item => {
					arr.push(item);
					if (item.children && item.children.length) {
						arr = arr.concat(this.flatTree(item.children));
					}
				});
				return arr;
			},
			// 点击打开弹窗
			onClick () {
				if(this.disabled) {
					return false
				}
				this.$refs.qiantree._show();
			},
			
			// 确定回调事件
			treeConfirm(e) {
				var title = ''
				var id = ''
				var minister = ''
				if (e && e.length) {
					e.map((value, index) => {
						title = value.departName + ',' + title
						id = value.id + ',' + id
						minister = value.minister + ',' + minister
						
					})
					title = title.substring(0, title.lastIndexOf(','))
					id = id.substring(0, id.lastIndexOf(','))
					minister = minister.substring(0, minister.lastIndexOf(','))
				}
				// this.title = title
				this.$emit('change', id)
				this.$emit('detail', e)
			},
			// 取消回调事件
			treeCancel(e) {
			},
			
			
		},
		mounted() {
			//初始化数据
			// this.queryDictModelByCodes(this.dictName);
		},
	}
</script>

<style lang="scss" scoped>
	
</style>